                                       <!-- 领取组件   可传递属性 -->

<!--    getThe：领取状态   (还未领取(显示 领取)为 false  成功领取(显示 已领取)为 true)  默认：false
		goUse： 是否开启   去使用  状态  （开启去使用为 true  不开启去使用为 false）    默认：false
		goUseYes： 是否开启  已使用  状态  （开启去使用为 true  不开启去使用为 false）  默认：false
		onlyLogo： 接收  领取  点击函数所需要的  id 等唯一标识
		indexs： 接收数组中的 index 位置信息
		goUrl： 接收  去使用  点击函数所需要的  跳转url地址
		pvuvName： pvuv埋点传递名称信息 (传递父组件名称)
		img：图片地址
		unit：标题计量单位  （￥、$）等 
		numbers：标题价格等代表数字
		title：标题文字
		posititve：副标题内容 -->
<!-- 需配套的函数 -->
<!-- getTheTo：点击领取函数 应用父组件点击函数  （父组件中调用口子后的函数） 将判断的唯一标识  onlyLogo  位置信息indexs  pvuvName传递回去，用于修改当时显示状态 从领取    变为   已领取 
	goUseTo：点击去使用函数 应用父组件点击函数  （父组件中调用口子后的函数） 将判断的唯一标识  onlyLogo  位置信息indexs  pvuvName  跳转地址goUrl传递回去 
		例如：getTheTo(msg){
				this.list[msg.index].statu = 1
			}-->

<template>
  <div class="toGetThe">
    <!-- 左边图片部分 -->
    <!-- 如果img背景图片地址不存在，则该部分隐藏 -->
    <!-- ------------------------------------------------------------------------------- -->
    <div
      class="toGetThe-img"
      :style="{ backgroundImage: 'url(' + img + ')' }"
      v-if="img"
    ></div>

    <!-- 组件文字部分 （标题 + 副标题） -->
    <!-- ------------------------------------------------------------------------------- -->
    <div class="toGetThe-msg">
      <!-- 标题部分 -->
      <!-- ================================================== -->
      <div class="toGetThe-msg-title">
        <!-- 可选择是否有单位  （￥、$）等 -->
        <span class="unit">{{ unit }}</span>
        <span class="numbers">{{ numbers }}</span>
        {{ title }}
      </div>

      <!-- 副标题部分 -->
      <!-- ================================================== -->
      <div class="toGetThe-msg-positive">{{ posititve }}</div>
    </div>

    <!-- 组件领取部分  -->
    <!-- ------------------------------------------------------------------------------- -->
    <div class="toGetThe-btn" v-if="!getThe && !goUse" @click="GetThe">
      立即领取
    </div>
    <div class="toGetThe-btn" v-if="getThe && !goUse">已领取</div>
    <div class="toGetThe-btn" v-if="!getThe && goUse" @click="GoUse">
      去使用
    </div>
    <div class="toGetThe-btn" v-if="goUseYes && !goUse">已使用</div>
  </div>
</template>

<script>
export default {
  props: {
    // 传递功能部分
    // ==================================================

    // 领取状态  (还未领取(显示 领取)为 false  成功领取(显示 已领取)为 true)
    getThe: {
      type: [Boolean],
      default: false,
    },

    // 是否开启  去使用  状态  （开启去使用为 true  不开启去使用为 false）
    goUse: {
      type: [Boolean],
      default: false,
    },

    // 是否开启  已使用  状态  （开启去使用为 true  不开启去使用为 false）
    goUseYes: {
      type: [Boolean],
      default: false,
    },

    // 接收  领取  点击函数所需要的  id 等唯一标识
    onlyLogo: {
      type: [String, Number],
      default: "",
    },

    // 接收数组中的 index 位置信息
    indexs: {
      type: [String, Number],
      default: "",
    },

    // 接收  去使用  点击函数所需要的  跳转url地址
    goUrl: {
      type: [String],
      default: "",
    },

    // pvuv埋点传递名称信息 (传递父组件名称)
    pvuvName: {
      type: [String],
      default: "",
    },

    // 传递内容信息部分
    // ==================================================

    // 图片地址
    img: {
      type: [String],
      default: "",
    },

    // 标题计量单位  （￥、$）等
    unit: {
      type: [String, Number],
      default: "",
    },

    // 标题价格等代表数字
    numbers: {
      type: [String, Number],
      default: "",
    },

    // 标题文字
    title: {
      type: [String],
      default: "",
    },

    // 副标题内容
    posititve: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 点击领取函数
    GetThe() {
      // 应用父组件点击函数  （父组件中调用口子后的函数） 将判断的唯一标识  onlyLogo  位置信息indexs  pvuvName传递回去  
      this.$emit("getTheTo", {
        onlyLogo: this.onlyLogo,
        index: this.indexs,
		pvuvName:this.pvuvName
      });
    },

    // 点击去使用函数
    GoUse() {
      // 应用父组件点击函数  （父组件中调用口子后的函数） 将判断的唯一标识  onlyLogo  位置信息indexs  pvuvName  跳转地址goUrl传递回去
      this.$emit("goUseTo", {
        onlyLogo: this.onlyLogo,
        index: this.indexs,
      	pvuvName:this.pvuvName,
		goUrl:this.goUrl
      });

	 
      // 如果是跳转内部链接
      // vue中
      // this.$router.push(this.goUrl)

      // 在uniapp中
      // uni.navigateTo({
      // 	url:this.goUrl
      // })
    },
  },
};
</script>

<style>
/* 领取组件外层 */
.toGetThe {
  width: 570rpx;
  height: 170rpx;
  border-bottom: 1px dashed #c9b47e;
  margin: auto;
  display: flex;
  align-items: center;
  position: relative;
}

/* 图片样式 */
/* ------------------------------------------------------------------------------------ */
.toGetThe-img {
 width: 112rpx;
 height: 112rpx;
 background: #ffffff;
 border: 2rpx solid #e0e0e0;
 border-radius: 12rpx;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 组件文字部分 （标题 + 副标题 */
/* ------------------------------------------------------------------------------------ */
/* 文字外围框 */
.toGetThe-msg {
  height: 112rpx;
  margin-left: 24rpx;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}

/* 标题 */
.toGetThe-msg-title {
  font-size: 40rpx;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  color: #333333;
  margin-bottom: 12rpx;
  line-height: 36rpx;
}

/* 价钱单位 */
.unit {
  font-size: 12px;
  font-weight: 600;
}

/* 副标题 */
.toGetThe-msg-positive {
 font-size: 28rpx;
 font-family: PingFangSC, PingFangSC-Regular;
 font-weight: 400;
 text-align: left;
 color: #726650;
 line-height: 40rpx;
}

/* 领取一套按键 */
/* ------------------------------------------------------------------------------------ */
.toGetThe-btn {
  width: 80px;
  height: 30px;
  background: linear-gradient(270deg,#4f524f, #3b3d3b);
  border-radius: 15px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  line-height: 30px;
  position: absolute;
  right: 0;
}
</style>
